<template>
	<view class="container">
		<cu-custom style="background-color: #fff;" bgColor="" :isBack="true">
			<block slot="content">监控列表</block>
			<view slot="right"  @tap=""><image src="../../static/icon/shaixuan.png" style="width: 15px;height: 17px;"></image> </view>
		</cu-custom>
		<view class="mainContent">
			<view class="ordinaryText">监控数量：{{jkNum}}</view>
			<view class="mainList">
				<view class="list_cell" v-for="(item,index) in jkList" @tap="jiankDetail" :key="index" :data-jkid="item.id">
					<view class="jiankongFont"><image src="../../static/icon/jiankFont.png"></image> </view>
					<view class="listRight">
						<view class="rightTitle">
							{{item.title}}
						</view>
						<!-- <view class="jktime">{{item.time}}</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				jkNum:0,
				jkList:[
					// {title:"马栏山视频文创产业园能源项目",time:"监控时间：2021-03-02"},
					// {title:"马栏山信息港项目",time:"监控时间：2021-03-13"},
					// {title:"朝阳小学、朝阳中学项目",time:"监控时间：2021-03-15"},
					// {title:"滨江景观道提质改造工程设计施工总承包项目",time:"监控时间：2021-03-19"}
				],
				roleType:'',
				isShowsx:false
			}
		},
		onLoad:function(options){
			const roleType = uni.getStorageSync('roleType');
			console.log(roleType);
			this.roleType = roleType;
			if(this.roleType==1){
				this.isShowsx = true
			}else{
				this.isShowsx = false
			}
			console.log(options);
			let projectId = options.projectId;
			console.log(projectId);
			this.$http.get("/project/v1/monitorList.do?projectId="+projectId,{
				params: ''
			}).then(data=>{
				this.jkNum = data.data.length;
				this.jkList = data.data;
				console.log(data.data);
				this.jkList= this.jkList.map((item)=>{
					return{
						title:item.monitorName,
						id:item.iP
					}
				})
			})
		},
		methods:{
			jiankDetail(e){
				debugger;
				let id = e.currentTarget.dataset.jkid;
				console.log(id);
				uni.navigateTo({
					url:"./jk?id="+id
				})
			}
		}
	}
</script>

<style>
	.container{
		width: 100%;
		height: 100vh;
		background-color: #F5F6F7;
	}
	.mainContent{
		width: 100%;
		padding: 10px 20px;
		box-sizing: border-box;
	}
	.ordinaryText{
		color: #000;
		font-size: 14px;
		margin-top: 10px;
	}
	.ordinaryBtn{
		width: 150px;
		height: 50px;
		background-color: #007AFF;
		color: #fff;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mainList{
		width: 100%;
	}
	.list_cell{
		width: 100%;
		/* height: 75px; */
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		box-sizing: border-box;
		margin-top: 10px;
		display: flex;
	}
	.jiankongFont,.jiankongFont image{
		width: 45px;
		height: 45px;
	}
	.listRight{
		margin-left: 10px;
		flex: 1;
		display: flex;
		align-items: center;
	}
	.rightTitle{
		color: #28435D;
		font-size: 16px;
	}
	.jktime{
		color: #93A0AD;
		font-size: 14px;
		margin-top: 3px;
	}
</style>
